<template>
    <div class="container" @click="handleClose">
       <div class="wrapper">
           <swiper :options="swiperOption">
            <swiper-slide v-for="(item,index) in imgs" :key="index">
                <img class="gallary-img" :src="item" alt="">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
       </div>
    </div>
</template>
<script>
    import CommonGallary from 'common/gallary/Gallary'
    export default {
       name:"CommonGallary",
       props:{
            imgs:{
                type: Array,
                dafault (){
                    return ['http://img1.qunarzz.com/sight/p0/1508/a5/4003f9dd7bebf61eccbf64046e26d487.water.jpg_r_800x800_4701d58f.jpg','http://img1.qunarzz.com/sight/p0/1507/b0/debf337993099d34013807df5cf5545b.water.jpg_r_800x800_73c0f11b.jpg']
                }
            }
       },
       methods:{
            handleClose (){
                this.$emit('close')
            }
       },
       data (){
        return {
            swiperOption:{
                pagination:".swiper-pagination",
                paginationType:"fraction",
                observeParents: true,
                observer: true,
            }
        }
       }
    };
</script>
<style lang="stylus" scoped>
    .container >>> .swiper-container 
        overflow: inherit;
    

    .container {
        display:flex;
        flex-direction:column;
        justify-content:center;
        z-index:99;
        position: fixed;
        left:0;
        right:0;
        top:0;
        bottom: 0;
        background: #000;
    }
    .wrapper {
        /*overflow:hidden;*/
        height:0;
        width:100%;
        padding-bottom: 100%;
    }
    .gallary-img {
        width:100%;
    }
    .swiper-pagination {
        color:#fff;
        bottom:-0.5rem;
    }
    
</style>